<template>
  <div id="problem-list">

    <div class="create-problem">
      <el-form label-width="55px" label-position="left">
        <el-col>
          <el-form-item label="标题：" class="pr">
            <el-input placeholder="请输入提问标题" style="width: 600px"></el-input>
            <el-button type="primary" @click="submit" style="position: absolute;right: 0;bottom: 0;" size="mini">提交</el-button>
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 30px">
          <mavon-editor codeStyle="dracula"
                        placeholder="请输入问题描述"
                        v-model="editValue"
                        @change="submit"
                        :subfield="false"
                        :toolbars="toolbarsOptions"
                        style="height: 300px;overflow: auto;"/>
        </el-col>
      </el-form>
    </div>

    <a class="table-list">
      <el-tag type="danger">8</el-tag>
      <div class="di fr" style="width: 700px">
        <!-- 标题/作者 -->
        <div class="oa">
          <div class="title fl text-hidden">
            你好请问
          </div>
          <div class="auth fr">
            <font-awesome-icon :icon="['fas', 'user']" class="fa-sm"></font-awesome-icon>
            <span>zeng</span>
          </div>
        </div>
        <!-- 问题描述 -->
        <div class="oa detail">
          <div class="text-hidden fl">
            不知道
          </div>
          <div class="fr">
            2018/05/02
          </div>
        </div>
      </div>
    </a>
  </div>
</template>


<!-- vue markdown ->> https://github.com/hinesboy/mavonEditor -->
<script lang="ts">
  import {Component, Model, Prop, Vue} from 'vue-property-decorator'

  @Component
  export default class list extends Vue {
    name = "index";
    isLogin: boolean = false;
    editValue = '';
    htmlValue = ''; // 渲染后的html语法
    toolbarsOptions:Object = {
      quote: true, // 引用
      ol: true, // 有序列表
      ul: true, // 无序列表
      link: true, // 链接
      imagelink: true, // 图片链接
      code: true, // code
      undo: true, // 上一步
      redo: true, // 下一步
      preview: true, // 预览
    };

    submit(value, render) {
      this.htmlValue = render;
    }

    created() {
    };

    mounted() {
    };
  }
</script>

<style lang="scss" scoped>

  @import "../../assets/scss/config";

  #problem-list {
    font-size: 14px;
    width: $middle-width;
    padding: 5px;
    .table-list {
      display: block;
      padding: 5px 10px;
      overflow: auto;
      border-bottom: 1px dotted #e4e6eb;
      transition: background-color .3s;
      &:hover {
        background: #f8faff;
      }
    }

    .el-tag.el-tag--danger {
      width: 50px;
      text-align: center
    }

    .di {
      display: inline-block;
    }

    .fr {
      float: right;
    }

    .fl {
      float: left;
    }

    .oa {
      overflow: auto;
    }

    .text-hidden {
      overflow-x: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .title {
      width: 600px;
    }

    .detail {
      font-size: 12px;
      margin-top: 15px;
      color: #666;
    }

    .auth {
      font-size: 12px;
    }

  }


</style>
